<template>
  <el-container>
    <el-header class="header">
      <div class="left">
        <div class="group">
          <span>医生姓名：</span>
          <el-input class="com-input" placeholder="请输入医生名称" v-model="name" />
          <span>医院职称：</span>
          <el-select v-model="level" class="com-input" placeholder="全部">
            <el-option v-for="item in hosGrade" :key="item.id" :label="item.dValue" :value="item.dKey" />
          </el-select>
          <span>身份证号：</span>
          <el-input class="com-input" placeholder="请输入医生名称" v-model="paper" />
        </div>
        <div class="group">
          <span>医院名称：</span>
          <el-input class="com-input" placeholder="请输入医院名称" v-model="hospitalName" />
          <span>医生手机：</span>
          <el-input class="com-input" placeholder="请输入医生手机号" v-model="phone" />
        </div>
        <div class="group">
          <span class="text">科室：</span>
          <hos-offices ref="doctorOffices"/>
               <el-checkbox v-model="register" label= true>注册</el-checkbox>
                <el-checkbox v-model="authentication" label= true>认证</el-checkbox>
                <el-checkbox v-model="choose" label= true>优选</el-checkbox>
        </div>
        <div class="group">
          <span class="text">地区：</span>
          <user-address ref="doctorAddress"/>
        </div>
      </div>
      <div class="right">
        <el-button type="primary" icon="el-icon-search" class="btn" @click="search">查询</el-button>
        <el-button type="primary" @click="addCom" class="btn">新增医生</el-button>
      </div>
    </el-header>
  </el-container>
</template>
<script>
import { doctorTitleList } from "data/listBody"
import UserAddress from "components/address";
import HosOffices from "components/hosOffices";
export default {
  name: "doctorOptions",
  data() {
    return {
      hosGrade: doctorTitleList, //医生职称,
      name: "", //医生姓名
      hospitalName: "", //医院别称
      phone: "", //医生手机
      level: "",
      paper:"",
      register:"",
      authentication:"",
      choose:""
    };
  },
  components: {
    UserAddress,
    HosOffices
  },
  methods: {
    addCom() {
      this.$router.push("addDoc?type=add");
    },
    search(){
      this.$emit("search");
    },
    getData(){
      let params = {
        name: this.name, //医生名字
        hospitalName: this.hospitalName, //医院名称
        phone: this.phone, //医生手机
        level: this.level, //医生职称
        paper:this.paper,
        register:this.register,
        authentication:this.authentication,
        choose:this.choose
      }
      return this.lodash.assign({}, params, this.$refs.doctorOffices.getData(), this.$refs.doctorAddress.getData());
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./../../../../assets/less/color.less");
.header {
  display: flex;
  text-align: left;
  flex-wrap: wrap;
  border-bottom: 1px solid @border-gray;
  height: inherit !important;
  padding-bottom: 10px;
  .group {
    padding: 10px;
    display: flex;
    align-items: center;
    &:first-child{
      padding-top: 0;
    }
    span{
      display: inline-block;
      min-width: 80px;
    }
    .text {
      display: inline-block;
      text-indent: 2em;
    }
  }
  .com-input {
    width: 210px;
    margin-right: 20px;
  }
  .right {
    display: flex;
    align-items: center;
    .btn {
      margin-left: 20px;
    }
  }
}
</style>